<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
        <meta name="author" content="bais">
        <title>小米</title>
        <link href="../css/bootstrap.min.css" rel="stylesheet">
        <style>
            .navbar-brand img{
                width: 50%;
            }
            .navbar-brand{
                padding-left: 0px;
                padding-right:0px;
                width: 60px;
            }
            .container-fluid{
                height:30%;
                
            }
            .navbar-nav input{
                height: 25px;
                width: 50%;
                margin-top: 5px;
            }
            .navbar-nav a{
                color: white;
                font-size: 16px;
                margin-left: 18px;
            }
            .navbar-inverse{
                margin-bottom: 0px;
            }
            .carousel-inner img{
                width: 100%;
            }
            .s1{
                color: orange;
                margin: 10px 0px;
                border-right: 1px solid black;
                font-size: 16px;
                padding-left: 5px;
            }
            .s2{
                margin: 10px 0px;
            }
            .d1 img{
                width: 100%;   
                height: 30vh;
                margin: 5px 0px;
            }
            .d2{
                padding: 5px;
                padding-left:3px;
                padding-right: 3px;
            }
            .d2 img{
                width: 100%;
            }
            .d3{
                padding: 5px;
                padding-right: 3px;
                padding-left: 3px;
            }
            .d3 img{
                width: 100%;
            }
            /*屏幕大于768时使用媒体查询*/
            @media(min-width:768px){
                .container-fluid{
                    height: 100px;
                }
                .navbar-brand img{
                    width: 100%;
                    margin: 15px;
                }
                .navbar-nav input{
                    width: 500px;
                    height: 50px;
                    margin-left: 40px;
                    margin-top: 23px;
                }
                .navbar-nav a{
                    font-size: 34px;
                    vertical-align: middle;
                }
            }
            /*屏幕大于1024时使用媒体查询*/
            @media(min-width:1024px){
                .container-fluid{
                    height: 120px;
                }
                .navbar-brand img{
                    width: 130%;
                    margin: 20px;
                }
                .navbar-nav input{
                    width: 700px;
                    height: 70px;
                    margin-left: 70px;
                    margin-top: 25px;
                }
                .navbar-nav a{
                    font-size: 42px;
                    vertical-align: middle;
                }
            }
   
        </style>
    </head>
    <body>
        <!--******导航栏******-->
        <nav class="navbar navbar-inverse" role="navigation">
            <div class="container-fluid">
            
                <a class="navbar-brand" href="#">
                    <img src="image/common/logo.png" alt="">
                </a>
            
                <div id="example-navbar-collapse">
                    <ul class="nav navbar-nav">
                        <input type="text" placeholder="搜索商品名称">
                        <a href="#">登录</a>
                    </ul>
                </div>
            </div>
        </nav>
        <!--*******轮播********-->
        <div id="myCarousel" class="carousel slide">
            <!-- 轮播（Carousel）指标 -->
            <ol class="carousel-indicators">
                <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
                <li data-target="#myCarousel" data-slide-to="1"></li>
                <li data-target="#myCarousel" data-slide-to="2"></li>
            </ol>   
            <!-- 轮播（Carousel）项目 -->
            <div class="carousel-inner">
                <div class="item active">
                    <img src="image/home/banner01.png" alt="First slide">
                </div>
                <div class="item">
                    <img src="image/home/banner02.png" alt="Second slide">
                </div>
                <div class="item">
                    <img src="image/home/banner03.png" alt="Third slide">
                </div>
            </div>
            <!-- 轮播（Carousel）导航 -->
            <a class="carousel-control left" href="#myCarousel" 
                data-slide="prev">&lsaquo;
            </a>
            <a class="carousel-control right" href="#myCarousel" 
                data-slide="next">&rsaquo;
            </a>
        </div>
        <!--********主体内容*********-->
        <div class="col-xs-3 s1">商城早报</div>
        <div class="col-xs-9 s2">小米mix震撼来袭 通往新世界的大门</div>

        <!--**********放图片*************-->
    
          <div class="d1">
            <img src="image/home/nsza_06.png" alt="">
          </div>
          <div class=" col-xs-6 d2">
            <img src="image/home/xjbb_02.png" alt="">
          </div>
          <div class=" col-xs-6 d3">
            <img src="image/home/xjbb_03.png" alt="">
          </div>
        <script src="../js/jquery.min.js"></script>
        <script src="../js/bootstrap.min.js"></script>
    </body>
</html>